import React, {Component} from 'react';
import Login from "./Login";
import LookMsg from "./LookMsg";
import MsgList from "./MsgList";


let msgList = [];

class MsgBoard extends Component {
  state = {
    showId: 0,
    username: '',
    msgObj: {}
  };

  constructor(props) {
    super(props);
    this.changeShowId = this.changeShowId.bind(this);
    this.receiveMsg = this.receiveMsg.bind(this);
  }

  changeShowId({showId, username}) {
    //this undefined
    this.setState({
      showId,
    });

    if (username) {
      this.setState({
        username
      })
    }
  }

  receiveMsg(msgObj) {
    console.log(msgObj);
    this.setState({
      // msgObj,
      showId: msgObj.showId
    });

    msgList.push(msgObj);
  }

  render() {
    let {showId, username, msgObj} = this.state;
    return (
      <div>
        {/* <button onClick={() => {
          this.setState({
            showId: 1
          })
        }}>改变showId
        </button>*/}
        {showId === 0 && <Login changeShowId={this.changeShowId}/>}
        {showId === 1 && <LookMsg username={username}
                                  sendMsg={this.receiveMsg}
                                  changeShowId={this.changeShowId}/>}
        {showId === 2 && <MsgList msgList={msgList} changeShowId={this.changeShowId}/>}

        {/*路由 配置路由表 根据路径进行跳转*/}
      </div>
    );
  }
}

export default MsgBoard;
